<template>
    <div class="home">
        <van-search v-model.lazy="value" @keydown.enter="searchData" show-action placeholder="请输入搜索关键词">
            <template #action>
                <div @click="searchData">搜索</div>
            </template>
        </van-search>

        <van-tabs v-model="activeName">
            <van-tab title="推荐" name="recommend" to="/"></van-tab>
            <van-tab title="排行" name="ranking" to="/ranking"></van-tab>
            <van-tab title="分类" name="classification" to="/classification"></van-tab>
        </van-tabs>
        <router-view />
    </div>
</template>

<script>
import { search } from "../../request";
export default {
    data() {
        return {
            activeName: "recommend",
            value: "",
            flat: false,
            searchListArr: [],
        };
    },
    methods: {
        searchData() {
            if (this.value != "") {
                search({ styleId: -1, areaId: 2, isFinish: -1, order: -1, pageNum: 1, pageSize: 20, isFree: -1, keyWord: this.value })
                    .then((data) => {
                        this.searchListArr = data.data.data.list;
                        return this.searchListArr;
                    })
                    .then((content) => {
                        console.log("content", content);
                        this.$router.push({ path: "/searchList", query: { searchList: JSON.stringify(content) } });
                    });
            }
        },
    },
    mounted() {
        this.activeName = this.$route.name;
    },
    beforeRouteLeave(to, from, next) {
        if (to.name != "details") {
            this.activeName = to.name;
        }
        next();
    },
    updated() {
        this.$nextTick(() => {
            this.activeName = this.$route.name;
        });
    },
};
</script>

<style lang="scss" scope>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";
.van-tabs__wrap {
    border-bottom: 1px solid whitesmoke;
}
.van-tabs__line {
    background-color: $activeColor;
}
.van-search {
    padding: 14px 12px 0;
}
</style>
